<template>
  <a-affix v-if="showButton" :style="affixStyle">
    <a-button
      type="primary"
      shape="circle"
      size="large"
      @click="scrollToTop"
      :style="buttonStyle"
      :title="'回到顶部'"
    >
      <template #icon>
        <UpOutlined />
      </template>
    </a-button>
  </a-affix>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { UpOutlined } from '@ant-design/icons-vue'

const affixStyle = {
  position: 'fixed',
  right: '32px',
  bottom: '120px',
  zIndex: 1000,
}
const buttonStyle = {
  boxShadow: '0 2px 8px rgba(24,144,255,0.18)',
}

const showButton = ref(false)

function handleScroll() {
  showButton.value = window.scrollY > 10
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  handleScroll()
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<style scoped></style>
